<script setup lang="ts">
import { Button } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

const router = useRouter()

defineOptions({ name: 'HomePage' })

// Scroll snapping state
const currentSectionIndex = ref(0)
const isScrolling = ref(false)
const scrollTimeout = ref<number | null>(null)

// Section configuration
const sections = [
  { id: 'hero', name: 'Hero Section' },
  { id: 'features', name: 'Features Section' },
  { id: 'faq', name: 'FAQ Section' }
]

// 跳转到角色页面
const goToRole = () => {
  router.push('/role-chat')
}

// 跳转到功能介绍部分
const scrollToFeatures = () => {
  scrollToSection(1)
}

// Smooth scroll to specific section
const scrollToSection = (index: number) => {
  if (index < 0 || index >= sections.length) return
  
  const sectionElement = document.getElementById(sections[index].id)
  if (sectionElement) {
    isScrolling.value = true
    currentSectionIndex.value = index
    
    sectionElement.scrollIntoView({ 
      behavior: 'smooth',
      block: 'start'
    })
    
    // Reset scrolling flag after animation
    setTimeout(() => {
      isScrolling.value = false
    }, 1000)
  }
}

// Get current section based on scroll position
const getCurrentSection = (): number => {
  const scrollY = window.scrollY
  const windowHeight = window.innerHeight
  const documentHeight = document.documentElement.scrollHeight
  
  // If near bottom, return last section
  if (scrollY + windowHeight >= documentHeight - 50) { // 减少底部检测阈值从100到50
    return sections.length - 1
  }
  
  // Check each section's position
  for (let i = 0; i < sections.length; i++) {
    const element = document.getElementById(sections[i].id)
    if (element) {
      const rect = element.getBoundingClientRect()
      const elementTop = rect.top + scrollY
      const elementBottom = elementTop + rect.height
      
      // If section is in viewport center area - 减少阈值提高敏感度
      if (scrollY >= elementTop - windowHeight * 0.2 && scrollY < elementBottom - windowHeight * 0.2) { // 从0.3改为0.2
        return i
      }
    }
  }
  
  return currentSectionIndex.value
}

// Throttled scroll handler
const handleScroll = () => {
  if (isScrolling.value) return
  
  // Clear existing timeout
  if (scrollTimeout.value !== null) {
    clearTimeout(scrollTimeout.value)
    scrollTimeout.value = null
  }
  
  // Set new timeout for scroll detection
  scrollTimeout.value = window.setTimeout(() => {
    const newSectionIndex = getCurrentSection()
    
    // Only snap if we've moved to a different section
    if (newSectionIndex !== currentSectionIndex.value) {
      scrollToSection(newSectionIndex)
    }
  }, 100) // 减少debounce时间从150ms到100ms，提高响应速度
}

// Handle wheel events for immediate snapping
const handleWheel = (event: WheelEvent) => {
  if (isScrolling.value) {
    event.preventDefault()
    return
  }
  
  const delta = event.deltaY
  const threshold = 20 // 减少阈值从50到20，提高敏感度
  
  if (Math.abs(delta) > threshold) {
    event.preventDefault()
    
    if (delta > 0) {
      // Scrolling down
      const nextIndex = Math.min(currentSectionIndex.value + 1, sections.length - 1)
      if (nextIndex !== currentSectionIndex.value) {
        scrollToSection(nextIndex)
      }
    } else {
      // Scrolling up
      const prevIndex = Math.max(currentSectionIndex.value - 1, 0)
      if (prevIndex !== currentSectionIndex.value) {
        scrollToSection(prevIndex)
      }
    }
  }
}

// Handle touch events for mobile
let touchStartY = 0
let touchEndY = 0

const handleTouchStart = (event: TouchEvent) => {
  if (event.touches && event.touches[0]) {
    touchStartY = event.touches[0].clientY
  }
}

const handleTouchEnd = (event: TouchEvent) => {
  if (isScrolling.value) return
  
  if (event.changedTouches && event.changedTouches[0]) {
    touchEndY = event.changedTouches[0].clientY
    const deltaY = touchStartY - touchEndY
    const threshold = 30 // 减少阈值从50到30，提高移动端敏感度
    
    if (Math.abs(deltaY) > threshold) {
      event.preventDefault()
      
      if (deltaY > 0) {
        // Swiping up (scrolling down)
        const nextIndex = Math.min(currentSectionIndex.value + 1, sections.length - 1)
        if (nextIndex !== currentSectionIndex.value) {
          scrollToSection(nextIndex)
        }
      } else {
        // Swiping down (scrolling up)
        const prevIndex = Math.max(currentSectionIndex.value - 1, 0)
        if (prevIndex !== currentSectionIndex.value) {
          scrollToSection(prevIndex)
        }
      }
    }
  }
}

// Lifecycle hooks
onMounted(() => {
  // 等待DOM完全渲染后再初始化
  nextTick(() => {
    // Initialize current section
    currentSectionIndex.value = getCurrentSection()
    
    // 强制触发一次section检测，确保初始状态正确
    const initialSection = getCurrentSection()
    if (initialSection !== currentSectionIndex.value) {
      currentSectionIndex.value = initialSection
    }
    
    // 添加一个短暂延迟确保所有元素都已渲染完成
    setTimeout(() => {
      // 再次确认当前section
      const confirmedSection = getCurrentSection()
      if (confirmedSection !== currentSectionIndex.value) {
        currentSectionIndex.value = confirmedSection
      }
      
      // 确保导航指示器状态正确
      console.log('Initial section index:', currentSectionIndex.value)
    }, 100)
  })
  
  // Add event listeners - 立即添加，不等待DOM渲染
  window.addEventListener('scroll', handleScroll, { passive: true })
  window.addEventListener('wheel', handleWheel, { passive: false })
  window.addEventListener('touchstart', handleTouchStart, { passive: true })
  window.addEventListener('touchend', handleTouchEnd, { passive: false })
  
  // 添加resize事件监听器，确保窗口大小变化时重新计算section
  window.addEventListener('resize', () => {
    setTimeout(() => {
      const newSection = getCurrentSection()
      if (newSection !== currentSectionIndex.value) {
        currentSectionIndex.value = newSection
      }
    }, 100)
  })
})

onUnmounted(() => {
  // Clean up event listeners
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('wheel', handleWheel)
  window.removeEventListener('touchstart', handleTouchStart)
  window.removeEventListener('touchend', handleTouchEnd)
  window.removeEventListener('resize', () => {})
  
  // Clear timeout
  if (scrollTimeout.value !== null) {
    clearTimeout(scrollTimeout.value)
  }
})
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 scroll-snap-container">
    <!-- Hero Section - 产品介绍区域 -->
    <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden scroll-snap-section">
      <!-- 增强的背景动画层 -->
      <div class="absolute inset-0">
        <!-- 主背景网格动画 -->
        <div 
          class="absolute inset-0 opacity-20"
          :style="{
            backgroundImage: `url('')`,
            backgroundSize: '40px 40px',
            animation: 'float-grid 8s ease-in-out infinite'
          }"
        ></div>
        
        <!-- 浮动装饰元素 -->
        <div class="floating-elements">
          <div class="floating-dot floating-dot-1"></div>
          <div class="floating-dot floating-dot-2"></div>
          <div class="floating-dot floating-dot-3"></div>
          <div class="floating-dot floating-dot-4"></div>
          <div class="floating-dot floating-dot-5"></div>
          <div class="floating-dot floating-dot-6"></div>
        </div>
        
        <!-- 渐变光晕效果 -->
        <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
        <div class="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute bottom-1/4 left-1/3 w-96 h-96 bg-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
      </div>
      
      <div class="relative z-10 text-center max-w-4xl mx-auto px-6">
        <h1 class="text-6xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent animate-text-shimmer">
          CodeWin AI 角色扮演平台
        </h1>
        <p class="text-xl text-gray-600 mb-8 leading-relaxed animate-fade-in-up" style="animation-delay: 0.3s;">
          基于Vue 3 + TypeScript构建的AI驱动角色扮演与语音对话平台。
          支持智能角色创建、实时语音交互、多人聊天和AI听书功能。
        </p>
        <div class="flex gap-4 justify-center animate-fade-in-up" style="animation-delay: 0.6s;">
          <Button type="primary" size="large" class="px-8 py-3 h-auto text-lg hover:scale-105 transition-transform duration-200" @click="goToRole">
            开始角色扮演
          </Button>
          <Button size="large" class="px-8 py-3 h-auto text-lg hover:scale-105 transition-transform duration-200" @click="scrollToFeatures">
            探索功能
          </Button>
        </div>
      </div>
    </section>

    <!-- 技术栈展示 -->
    <!-- <section class="py-20 bg-white">
      <div class="container mx-auto px-6">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">技术架构</h2>
          <p class="text-xl text-gray-600">基于现代化前端技术栈构建</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-items-center">
          <div class="flex flex-col items-center p-6 rounded-lg hover:shadow-lg transition-shadow">
            <div class="w-16 h-16 mb-4 flex items-center justify-center bg-green-100 rounded-lg">
              <svg class="w-10 h-10 text-green-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-700">Vue 3</span>
          </div>
          
          <div class="flex flex-col items-center p-6 rounded-lg hover:shadow-lg transition-shadow">
            <div class="w-16 h-16 mb-4 flex items-center justify-center bg-blue-100 rounded-lg">
              <svg class="w-10 h-10 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-700">TypeScript</span>
          </div>
          
       
          
          <div class="flex flex-col items-center p-6 rounded-lg hover:shadow-lg transition-shadow">
            <div class="w-16 h-16 mb-4 flex items-center justify-center bg-yellow-100 rounded-lg">
              <svg class="w-10 h-10 text-yellow-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M0 12v12h24V0H0v12zm19.341-.956c.61.152 1.074.423 1.501.865.221.236.549.666.549.666l-3.976 2.49s-.197-.294-.297-.406c-.297-.336-.623-.455-1.145-.336-.297.067-.445.235-.469.587-.024.397.287.583 1.03.927 1.416.656 2.005 1.084 2.005 2.248 0 1.314-.92 2.028-2.684 2.028-1.195 0-2.082-.36-2.558-1.218-.317-.571-.36-.856-.36-.856l4.044-2.490s.214.404.404.621c.405.462.91.518 1.358.235.24-.152.29-.29.29-.518 0-.336-.207-.518-.73-.813-1.005-.571-2.371-1.336-2.371-2.490 0-1.3.955-2.094 2.414-2.094z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-700">Vite</span>
          </div>

          
             <div class="flex flex-col items-center p-6 rounded-lg hover:shadow-lg transition-shadow">
            <div class="w-16 h-16 mb-4 flex items-center justify-center bg-purple-100 rounded-lg">
              <svg class="w-10 h-10 text-purple-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.36-.034-.47 0-.92.014-1.36.034.44-.572.895-1.096 1.36-1.564zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.64 25.64 0 0 1-4.412.005 26.64 26.64 0 0 1-1.183-1.86c-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.87A25.02 25.02 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933a25.952 25.952 0 0 0-1.345-2.32zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a23.966 23.966 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23.142 23.142 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a25.819 25.819 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143a22.005 22.005 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.185 1.185 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.36.034.47 0 .92-.014 1.36-.034-.44.572-.895 1.095-1.36 1.56-.465-.467-.92-.992-1.36-1.56z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-700">React</span>
          </div>
          <div class="flex flex-col items-center p-6 rounded-lg hover:shadow-lg transition-shadow">
            <div class="w-16 h-16 mb-4 flex items-center justify-center bg-indigo-100 rounded-lg">
              <svg class="w-10 h-10 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0zm5.568 7.178l-6.496 1.56a.876.876 0 0 0-.664.664l-1.56 6.496a.876.876 0 0 1-1.664 0l-1.56-6.496a.876.876 0 0 0-.664-.664L.664 7.178a.876.876 0 0 1 0-1.664l6.496-1.56a.876.876 0 0 0 .664-.664L9.384.794a.876.876 0 0 1 1.664 0l1.56 6.496a.876.876 0 0 0 .664.664l6.496 1.56a.876.876 0 0 1 0 1.664z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-700">AI 技术</span>
          </div>
          
          <div class="flex flex-col items-center p-6 rounded-lg hover:shadow-lg transition-shadow">
            <div class="w-16 h-16 mb-4 flex items-center justify-center bg-red-100 rounded-lg">
              <svg class="w-10 h-10 text-red-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2.4c5.302 0 9.6 4.298 9.6 9.6s-4.298 9.6-9.6 9.6S2.4 17.302 2.4 12 6.698 2.4 12 2.4zm0 1.2c-4.64 0-8.4 3.76-8.4 8.4s3.76 8.4 8.4 8.4 8.4-3.76 8.4-8.4-3.76-8.4-8.4-8.4zm0 2.4c3.314 0 6 2.686 6 6s-2.686 6-6 6-6-2.686-6-6 2.686-6 6-6z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-700">Ant Design</span>
          </div>
        </div>
      </div>
    </section> -->

    <!-- 产品功能展示 -->
    <section class="py-20 bg-gradient-to-br from-blue-50 to-purple-50 scroll-snap-section" id="features">
      <div class="container mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
          <!-- 左侧：功能演示视频区域 -->
          <div class="relative">
            <iframe 
              src="//player.bilibili.com/player.html?isOutside=true&aid=115282307849566&bvid=BV1mNnfz2ERJ&cid=32701549578&p=1" 
              class="w-full aspect-video rounded-2xl shadow-2xl border-0"
              scrolling="no" 
              frameborder="no" 
              framespacing="0" 
              allowfullscreen="true">
            </iframe>
            <div class="mt-4 text-center">
              <h3 class="text-xl font-semibold text-gray-900 mb-2">CodeWin 功能演示</h3>
              <p class="text-gray-600">观看平台核心功能介绍</p>
            </div>
          </div>
          
          <!-- 右侧：功能特性列表 -->
          <div class="space-y-8">
            <div>
              <h2 class="text-4xl font-bold text-gray-900 mb-6">核心功能</h2>
              <p class="text-xl text-gray-600 mb-8">
                CodeWin 提供完整的AI角色扮演解决方案，让您体验前所未有的智能交互
              </p>
            </div>
            
            <div class="space-y-6">
              <!-- AI角色扮演 -->
              <div class="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:scale-105 animate-slide-in-right" style="animation-delay: 0.1s;">
                <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                  <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">AI角色扮演系统</h3>
                  <p class="text-gray-600">智能角色创建、编辑和管理，支持个性化角色定制和克隆功能</p>
                </div>
              </div>
              
              <!-- 语音交互 -->
              <div class="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:scale-105 animate-slide-in-right" style="animation-delay: 0.2s;">
                <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                  <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">实时语音交互</h3>
                  <p class="text-gray-600">支持语音识别和文本转语音，多种音色选择，流式语音播放</p>
                </div>
              </div>
              
              <!-- 多人聊天 -->
              <div class="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:scale-105 animate-slide-in-right" style="animation-delay: 0.3s;">
                <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                  <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2v-6a2 2 0 012-2h8z"/>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">多人聊天系统</h3>
                  <p class="text-gray-600">创建聊天室，支持多角色同时在线，实时消息同步和角色管理</p>
                </div>
              </div>
              
              <!-- AI听书 -->
              <div class="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:scale-105 animate-slide-in-right" style="animation-delay: 0.4s;">
                <div class="flex-shrink-0 w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                  <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">AI听书功能</h3>
                  <p class="text-gray-600">文件上传转换，多角色配音系统，智能文本处理和音频播放</p>
                </div>
              </div>
              
              <!-- 知识库管理 -->
              <div class="flex items-start space-x-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:scale-105 animate-slide-in-right" style="animation-delay: 0.5s;">
                <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                  <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">知识库管理</h3>
                  <p class="text-gray-600">智能文档管理，知识库搜索和分类，支持多种文件格式上传</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ 模块 -->
    <section id="faq" class="py-16 bg-white scroll-snap-section">
      <div class="container mx-auto px-6">
        <div class="text-center mb-14">
          <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 text-xs font-medium mb-4">
            常见问题
          </div>
          <h2 class="text-4xl font-semibold text-gray-900 mb-6">常见问题解答</h2>
          <p class="font-medium text-gray-600">还有其他问题？请通过 support@codewin.ai 联系我们</p>
        </div>
        
        <div class="mx-auto max-w-6xl grid gap-8 md:grid-cols-2 md:gap-12">
          <!-- FAQ Item 1 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.1s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">1</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">CodeWin 平台主要功能是什么？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                CodeWin 是一个基于 AI 技术的角色扮演平台，主要提供 AI 角色扮演系统、实时语音交互、多人聊天系统、AI 听书功能和知识库管理等核心功能。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 2 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.2s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">2</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">平台使用了哪些技术栈？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                CodeWin 采用现代化的前端技术栈：Vue 3 + TypeScript + Composition API、Vite 构建工具、Ant Design Vue 组件库、UnoCSS 样式框架和 Pinia 状态管理。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 3 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.3s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">3</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">如何创建和管理 AI 角色？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                访问角色管理页面，点击"创建角色"按钮，填写角色基本信息、设置对话风格和专业领域、选择语音音色，保存后即可使用。支持角色克隆和批量管理功能。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 4 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.4s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">4</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">语音交互功能如何使用？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                在角色聊天界面，点击麦克风图标开始语音输入，系统会自动识别并转换为文字。AI 回复支持多种音色的语音播放，您可以在设置中选择喜欢的音色。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 5 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.5s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">5</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">多人聊天室如何创建？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                进入多人聊天页面，点击"创建聊天室"，设置房间名称和描述，选择参与的 AI 角色，创建后可邀请其他用户加入，支持实时消息同步。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 6 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.6s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">6</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">AI 听书功能支持哪些格式？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                支持 TXT、PDF、DOCX、EPUB 等常见文档格式。上传后系统会自动解析文本内容，您可以选择不同的 AI 角色进行配音朗读，支持章节分割和播放控制。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 7 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.7s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">7</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">知识库如何管理和搜索？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                在知识库页面可以上传、分类和管理文档，支持全文搜索和标签筛选。AI 角色可以基于知识库内容进行更准确的回答，提升对话质量。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 8 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.8s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">8</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">平台是否支持移动端？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                是的，CodeWin 采用响应式设计，完美支持手机、平板等移动设备。您可以通过浏览器访问，享受与桌面端一致的功能体验。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 9 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 0.9s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">9</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">数据安全和隐私保护如何？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                我们严格遵循数据保护法规，采用端到端加密技术，用户数据仅用于提供服务，不会被第三方访问。您可以随时删除或导出个人数据。
              </p>
            </div>
          </div>
          
          <!-- FAQ Item 10 -->
          <div class="flex gap-4 animate-fade-in-up" style="animation-delay: 1.0s;">
            <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-sm border border-primary font-mono text-xs text-primary">10</span>
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">未来会有哪些新功能？</h3>
              </div>
              <p class="text-gray-600 leading-relaxed">
                我们正在开发更多激动人心的事件，包括 AI 角色的情感表达增强、以及电子书中任务交互等，敬请期待。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section Navigation Indicator -->
    <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 hidden lg:flex flex-col space-y-3">
      <div 
        v-for="(section, index) in sections" 
        :key="section.id"
        class="w-3 h-3 rounded-full border-2 border-gray-400 cursor-pointer transition-all duration-300 hover:scale-125"
        :class="{
          'bg-blue-600 border-blue-600': currentSectionIndex === index,
          'bg-transparent': currentSectionIndex !== index
        }"
        @click="scrollToSection(index)"
        :title="section.name"
      ></div>
    </div>
  </div>
</template>

<style scoped>
/* Scroll snap container */
.scroll-snap-container {
  scroll-behavior: smooth;
}

/* Section scroll snap points */
.scroll-snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Smooth transitions for all elements */
* {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent scroll during transitions */
.scroll-locked {
  overflow: hidden;
}

/* Navigation indicator animations */
.fixed .w-3 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fixed .w-3:hover {
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* 渐变背景动画 */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-shift {
  animation: gradient-shift 8s ease infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .floating-dot {
    display: none;
  }
  
  .animate-text-shimmer {
    font-size: 2.5rem;
  }
  
  /* Hide navigation indicator on mobile */
  .fixed.right-6 {
    display: none !important;
  }
}

/* 新增背景动画效果 */
/* 网格浮动动画 */
@keyframes float-grid {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-10px) translateX(5px);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-5px) translateX(-5px);
    opacity: 0.25;
  }
  75% {
    transform: translateY(-15px) translateX(3px);
    opacity: 0.35;
  }
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floating-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  opacity: 0.6;
}

.floating-dot-1 {
  top: 20%;
  left: 10%;
  animation: float-1 6s ease-in-out infinite;
}

.floating-dot-2 {
  top: 60%;
  left: 80%;
  animation: float-2 8s ease-in-out infinite;
}

.floating-dot-3 {
  top: 30%;
  right: 20%;
  animation: float-3 7s ease-in-out infinite;
}

.floating-dot-4 {
  bottom: 40%;
  left: 15%;
  animation: float-4 9s ease-in-out infinite;
}

.floating-dot-5 {
  top: 70%;
  right: 30%;
  animation: float-5 5s ease-in-out infinite;
}

.floating-dot-6 {
  bottom: 20%;
  right: 10%;
  animation: float-6 10s ease-in-out infinite;
}

/* 浮动动画变体 */
@keyframes float-1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translateX(0px) translateY(0px); }
  50% { transform: translateX(-30px) translateY(-15px); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-25px) scale(1.2); }
}

@keyframes float-4 {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(90deg) translateY(-10px); }
  50% { transform: rotate(180deg) translateY(-5px); }
  75% { transform: rotate(270deg) translateY(-15px); }
}

@keyframes float-5 {
  0%, 100% { transform: translateX(0px); opacity: 0.6; }
  50% { transform: translateX(20px); opacity: 1; }
}

@keyframes float-6 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33% { transform: translateY(-15px) translateX(10px); }
  66% { transform: translateY(5px) translateX(-10px); }
}

/* 光晕动画 */
@keyframes blob {
  0%, 100% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 文字闪烁动画 */
@keyframes text-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.animate-text-shimmer {
  background: linear-gradient(90deg, #2563eb, #8b5cf6, #2563eb);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3s linear infinite;
}
</style>